<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="Materia - Admin Template">
    <meta name="keywords" content="materia, webapp, admin, dashboard, template, ui">
    <meta name="author" content="XiaoBingBy">
    <!-- <base href="/"> -->
    <title>Bing-Admin</title>
    <!-- Icons -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Plugins -->
    <link rel="stylesheet" href="/static/plugins/waves/waves.css">
    <link rel="stylesheet" href="/static/plugins/perfect-scrollbar/perfect-scrollbar.css">
    <!-- Css/Less Stylesheets -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/main.min.css">
    <link href='https://fonts.css.network/css?family=Roboto:400,500,700,300' rel='stylesheet' type='text/css'>
    <!-- Match Media polyfill for IE9 -->
    <!--[if IE 9]>
    <script src="/static/js/ie/matchMedia.js"></script>
    <![endif]-->
</head>
<body id="app" class="app off-canvas nav-expand">
    <!-- header -->
    <header class="site-head" id="site-head">
        <ul class="list-unstyled left-elems">
            <!-- nav trigger/collapse -->
            <li>
                <a href="javascript:;" class="nav-trigger ion ion-drag"></a>
            </li>
            <!-- #end nav-trigger -->

            <!-- Search box -->
            <li>
                <div class="form-search hidden-xs">
                    <form id="site-search" action="javascript:;">
                        <input type="search" class="form-control" placeholder="Type here for search...">
                        <button type="submit" class="ion ion-ios-search-strong"></button>
                    </form>
                </div>
            </li>    <!-- #end search-box -->

            <!-- site-logo for mobile nav -->
            <li>
                <div class="site-logo visible-xs">
                    <a href="javascript:;" class="text-uppercase h3">
                        <span class="text">权限管理系统</span>
                    </a>
                </div>
            </li> <!-- #end site-logo -->

            <!-- fullscreen -->
            <li class="fullscreen hidden-xs">
                <a href="javascript:;"><i class="ion ion-qr-scanner"></i></a>

            </li>    <!-- #end fullscreen -->

            <!-- notification drop -->
            <li class="notify-drop hidden-xs dropdown">
                <a href="javascript:;" data-toggle="dropdown">
                    <i class="ion ion-speakerphone"></i>
                    <span class="badge badge-danger badge-xs circle">3</span>
                </a>

                <div class="panel panel-default dropdown-menu">
                    <div class="panel-heading">
                        You have 3 new notifications
                        <a href="javascript:;" class="right btn btn-xs btn-pink mt-3">Show All</a>
                    </div>
                    <div class="panel-body">
                        <ul class="list-unstyled">
                            <li class="clearfix">
                                <a href="javascript:;">
                                    <span class="ion ion-archive left bg-success"></span>
                                    <div class="desc">
                                        <strong>App downloaded</strong>
                                        <p class="small text-muted">1 min ago</p>
                                    </div>
                                </a>
                            </li>
                            <li class="clearfix">
                                <a href="javascript:;">
                                    <span class="ion ion-alert-circled left bg-danger"></span>
                                    <div class="desc">
                                        <strong>Application Error</strong>
                                        <p class="small text-muted">4 hours ago</p>
                                    </div>
                                </a>
                            </li>
                            <li class="clearfix">
                                <a href="javascript:;">
                                    <span class="ion ion-person left bg-info"></span>
                                    <div class="desc">
                                        <strong>New User Registered</strong>
                                        <p class="small text-muted">2 days ago</p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

            </li>    <!-- #end notification drop -->

        </ul>

        <ul class="list-unstyled right-elems">
            <!-- profile drop -->
            <li class="profile-drop hidden-xs dropdown">
                <a href="javascript:;" data-toggle="dropdown">
                    <img src="/static/images/admin.jpg" alt="admin-pic">
                </a>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="javascript:;"><span class="ion ion-person">&nbsp;&nbsp;</span>Profile</a></li>
                    <li><a href="javascript:;"><span class="ion ion-settings">&nbsp;&nbsp;</span>Settings</a></li>
                    <li class="divider"></li>
                    <li><a href="javascript:;"><span class="ion ion-lock-combination">&nbsp;&nbsp;</span>Lock Screen</a>
                    </li>
                    <li><a href="javascript:;"><span class="ion ion-power">&nbsp;&nbsp;</span>Logout</a></li>
                </ul>
            </li>
            <!-- #end profile-drop -->

            <!-- sidebar contact -->
            <li class="floating-sidebar">
                <a href="javascript:;">
                    <i class="ion ion-grid"></i>
                </a>
                <div class="sidebar-wrap" data-perfect-scrollbar>
                    <ul class="nav nav-tabs nav-justified">
                        <li class="active">
                            <a href="ui.buttons.html#sidebar-chat-tab" data-toggle="tab">聊天</a>
                        </li>
                        <li>
                            <a href="ui.buttons.html#sidebar-info-tab" data-toggle="tab">信息</a>
                        </li>
                    </ul> <!-- #end nav-tabs -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="sidebar-chat-tab">
                            <div class="chat-tab tab clearfix">
                                <h5 class="title mt0 mb20">在线</h5>
                                <div class="user-container mb15">
                                    <img src="/static/images/sample/1.jpg" alt="">
                                    <div class="desc">
                                        <p class="mb0">John Wick</p>
                                        <p class="xsmall"><span class="ion ion-location"></span>&nbsp;San Franciso, USA</p>

                                    </div>
                                    <span class="ion ion-record avail right on"></span>
                                </div>

                                <div class="user-container mb15">
                                    <img src="/static/images/sample/2.jpg" alt="">
                                    <div class="desc">
                                        <p class="mb0">George K.</p>
                                        <p class="xsmall"><span class="ion ion-location"></span>&nbsp;California, USA</p>
                                    </div>
                                    <span class="ion ion-record avail right on"></span>
                                </div>

                                <div class="user-container mb15">
                                    <img src="/static/images/sample/3.jpg" alt="">
                                    <div class="desc">
                                        <p class="mb0">Shello Dse.</p>
                                        <p class="xsmall"><span class="ion ion-location"></span>&nbsp;Berlin, Germany</p>
                                    </div>
                                    <span class="ion ion-record avail right away"></span>
                                </div>

                                <div class="user-container mb15">
                                    <img src="/static/images/sample/4.jpg" alt="">
                                    <div class="desc">
                                        <p class="mb0">Lucas Tower</p>
                                        <p class="xsmall"><span class="ion ion-location"></span>&nbsp;Paris, France</p>
                                    </div>
                                    <span class="ion ion-record avail right away"></span>
                                </div>

                                <div class="user-container mb15">
                                    <img src="/static/images/sample/5.jpg" alt="">
                                    <div class="desc">
                                        <p class="mb0">Hey Win</p>
                                        <p class="xsmall"><span class="ion ion-location"></span>&nbsp;Hongkong, China</p>
                                    </div>
                                    <span class="ion ion-record avail right on"></span>
                                </div>

                                <div class="user-container mb15">
                                    <img src="/static/images/sample/6.jpg" alt="">
                                    <div class="desc">
                                        <p class="mb0">Kelvin L.</p>
                                        <p class="xsmall"><span class="ion ion-location"></span>&nbsp;Moscow, Russia</p>
                                    </div>
                                    <span class="ion ion-record avail right on"></span>
                                </div>

                                <h5 class="title mt0 mb20">离线</h5>

                                <div class="user-container mb15">
                                    <img src="/static/images/sample/7.jpg" alt="">
                                    <div class="desc">
                                        <p class="mb0">Martin Xx.</p>
                                        <p class="xsmall"><span class="ion ion-location"></span>&nbsp;xxx, yyy</p>
                                    </div>
                                    <span class="ion ion-record avail right off"></span>
                                </div>

                                <div class="user-container mb15">
                                    <img src="/static/images/sample/2.jpg" alt="">
                                    <div class="desc">
                                        <p class="mb0">Lorem Ipsum</p>
                                        <p class="xsmall"><span class="ion ion-location"></span>&nbsp;Virginia, USA</p>
                                    </div>
                                    <span class="ion ion-record avail right off"></span>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="sidebar-info-tab">
                            <div class="info-tab tab clearfix">
                                <h5 class="title mt0 mb20">工作进度</h5>
                                <ul class="list-unstyled mb15 clearfix">
                                    <li>
                                        <div class="clearfix mb10">
                                            <small class="left">App Upload</small>
                                            <small class="right">80%</small>
                                        </div>
                                        <div class="progress-xs progress">
                                            <div class="progress-bar progress-bar-primary" style="width: 80%;"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="clearfix mb10">
                                            <small class="left">Creating Assets</small>
                                            <small class="right">50%</small>
                                        </div>
                                        <div class="progress-xs progress">
                                            <div class="progress-bar progress-bar-danger" style="width: 50%;"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="clearfix mb10">
                                            <small class="left">New UI 2.0</small>
                                            <small class="right">90%</small>
                                        </div>
                                        <div class="progress-xs progress">
                                            <div class="progress-bar progress-bar-success" style="width: 90%;"></div>
                                        </div>
                                    </li>
                                </ul>

                                <h5 class="title mt0 mb20">设置</h5>
                                <div class="clearfix mb15">
                                    <div class="left">
                                        <p>Show me online</p>
                                    </div>

                                    <div class="right">
                                        <div class="ui-toggle ui-toggle-success ui-toggle-xs">
                                            <label>
                                                <input type="checkbox" checked>
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="clearfix mb15">
                                    <div class="left">
                                        <p>Notifications</p>
                                    </div>

                                    <div class="right">
                                        <div class="ui-toggle ui-toggle-success ui-toggle-xs">
                                            <label>
                                                <input type="checkbox">
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="clearfix mb15">
                                    <div class="left">
                                        <p>Enable History</p>
                                    </div>

                                    <div class="right">
                                        <div class="ui-toggle ui-toggle-success ui-toggle-xs">
                                            <label>
                                                <input type="checkbox" checked>
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- #end tab content -->
                </div>
                <!-- #end sidebar-wrap -->
            </li>

        </ul>

    </header>
    <!-- #end header -->


    <!-- main-container -->
    <div class="main-container clearfix nav-expand">
        <!-- main-navigation -->
        <aside class="nav-wrap nav-expand" id="site-nav" data-perfect-scrollbar>
            <div class="nav-head">
                <!-- site logo -->
                <a href="index.html" class="site-logo text-uppercase">
                    <i class="ion ion-disc"></i>
                    <span class="text">权限管理系统</span>
                </a>
            </div>

            <!-- Site nav (vertical) -->

            <nav class="site-nav clearfix" role="navigation">
                <div class="profile clearfix mb15">
                    <img src="/static/images/admin.jpg" alt="admin">
                    <div class="group">
                        <h5 class="name">姓名</h5>
                        <small class="desig text-uppercase">管理员</small>
                    </div>
                </div>
                <!-- navigation -->
                <ul class="list-unstyled clearfix nav-list mb15">
                    <li>
                        <a href="index.html">
                            <i class="ion ion-monitor"></i>
                            <span class="text">仪表盘</span>
                        </a>
                    </li>
                    <li class="open">
                        <a href="javascript:;">
                            <i class="ion ion-android-options"></i>
                            <span class="text">系统管理</span>
                            <i class="arrow ion-chevron-left"></i>
                            <span class="badge badge-xs badge-info">10</span>
                        </a>
                        <ul class="inner-drop list-unstyled">
                            <li class="active"><a href="ui.buttons.html">用户管理</a></li>
                            <li><a href="ui.typography.html">角色管理</a></li>
                            <li><a href="ui.grids.html">权限管理</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- #end navigation -->
            </nav>

            <!-- nav-foot -->
            <footer class="nav-foot">
                <p>2017 &copy; <span>XiaoBingBy</span></p>
            </footer>

        </aside>
        <!-- #end main-navigation -->

        <!-- content-here -->
        <div class="content-container" id="content">
            <!-- ui buttons -->
            <div class="page page-ui-buttons">

                <ol class="breadcrumb breadcrumb-small">
                    <li>UI Kit</li>
                    <li class="active"><a href="ui.buttons.html">Buttons</a></li>
                </ol>


                <div class="page-wrap">


                </div>
                <!-- #end page-wrap -->
            </div>
            <!-- #end ui buttons -->
        </div>

    </div>
    <!-- #end main-container -->


    <!-- theme settings -->
    <div class="site-settings clearfix hidden-xs">
        <div class="settings clearfix">
            <div class="trigger ion ion-settings left"></div>
            <div class="wrapper left">
                <ul class="list-unstyled other-settings">
                    <li class="clearfix mb10">
                        <div class="left small">菜单水平</div>
                        <div class="md-switch right">
                            <label>
                                <input type="checkbox" id="navHorizontal">
                                <span>&nbsp;</span>
                            </label>
                        </div>
                    </li>
                    <li class="clearfix mb10">
                        <div class="left small">固定顶部</div>
                        <div class="md-switch right">
                            <label>
                                <input type="checkbox" id="fixedHeader">
                                <span>&nbsp;</span>
                            </label>
                        </div>
                    </li>
                    <li class="clearfix mb10">
                        <div class="left small">收起左侧菜单</div>
                        <div class="md-switch right">
                            <label>
                                <input type="checkbox" id="navFull">
                                <span>&nbsp;</span>
                            </label>
                        </div>
                    </li>
                </ul>
                <hr/>
                <ul class="themes list-unstyled" id="themeColor">
                    <li data-theme="theme-zero" class="active"></li>
                    <li data-theme="theme-one"></li>
                    <li data-theme="theme-two"></li>
                    <li data-theme="theme-three"></li>
                    <li data-theme="theme-four"></li>
                    <li data-theme="theme-five"></li>
                    <li data-theme="theme-six"></li>
                    <li data-theme="theme-seven"></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- #end theme settings -->


    <!-- Dev only -->
    <!-- Vendors -->
    <script src="/static/js/vendors.js"></script>
    <script src="/static/plugins/screenfull/screenfull.js"></script>
    <script src="/static/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="/static/plugins/waves/waves.min.js"></script>
    <script src="/static/js/app.js"></script>
</body>
</html>